<template>
	<view>
		<view class="divider" style="background:#f1f1f1"/>
		
		<!--服务评价-->
		<scroll-view v-if="judge" scroll-y="true" class="scroll-base" :style="'height:'+clientHeight+'px'">
		<block v-for="(goodsItem, goodsIndex) in goods" :key="goodsIndex" >
		
		  <view class='item item-plus'>
		       <view class='time'></view>
		       <view class="flex-wrap flex-direction-row">
		         <image class="goodsimg" :src='goodsItem.imageURL'></image>
		         <text class='title'>{{goodsItem.name}}</text>
		         <view class="end">
		           <view class='price'>¥{{goodsItem.price}}</view>
		           <!-- <view class='time' style="text-align: end;">共{{item.goods.length}}件</view> -->
		         </view>
		       </view>
		     </view>
		
		<view class="service">
		  <!--评分-->
		  <view class='score'>
		    <view class='left'>
		      评分
		    </view>
		    <view class='right'>
		       <view @click="starTap(goodsIndex, index)"   class="star" v-for="(item,index) in userStars[goodsIndex]" :key="index" >
		        <image :src="item"></image>
		      </view>
		      <text class='rtxt'>{{wjxScore[goodsIndex]}}分</text>
		    </view>
		  </view>
		  
		</view>
		<!--textarea-->
		  <view class="conts">
		      <textarea class="areas" placeholder='您的评价请写在这里（最多300字）' :minlength="min" :maxlength="max" :data-upindex="goodsIndex" @click="inputs">
		      </textarea>
		  </view>
		</block>
		</scroll-view>
		
		<!--提交评价-->
		  <view v-if="judge" class="btn">
		    <button v-if="submitshow" class='btn' hover-class="confirm-hover" @click='handleBtn'>提交评价</button>
		  </view>
		
		<!-- 查询物流 -->
		<view v-else >
		
		  <view class='item item-plus item-border-line'>
		       <view class='time'>{{creat_date}}</view>  
		       <view class="flex-wrap flex-direction-row">
		         <image class="goodsimg" :src='goods[0].imageURL'></image>
		         <text class='title'>{{goods[0].name}}</text>
		         <view class="end">
		           <view class='price'>¥{{goods[0].price}}</view>
		           <view class='time' style="text-align: end;">共{{goods.length}}件</view>
		         </view>
		       </view>
		     </view>
		     
		  <!-- 大容器 -->
		<view class="r-wrap">
		    <!-- 每一条数据 -->
		    <view class="r-wrap-item" v-for="(item,index) in routes" :key="index" >
		    <!-- 左子项 -->
		    <view class="r-item-left">
		            <!-- 左子项上块 -->
		            <view :class="['r-item-left-crd', routes.length>=1 && index==0 ? 'first':'' ]"></view>
		            <!-- 点 -->
		            <view class="r-point-wrap">
		                <view :class="['r-point-item', index == 0 ? 'active' : '']"></view>
		            </view>
		            <!-- 左子项下块 -->
		            <view :class="['r-item-left-crd', routes.length>=1 && index==(routes.length-1) ? 'last':'']"></view>
		        </view>
		        <!-- 右子项 -->
		        <view class="r-item-right">
		            <!-- 内容 -->
		            <view class="r-item-right-content">
		                {{item.AcceptStation}}
		            </view>
		            <!-- 时间 -->
		            <view class="r-item-right-time">
		                {{item.AcceptTime}}
		            </view>
		        </view>
		    </view>
		  </view>
		
		</view>
		
		<loading hidden="hidden">努力加载中…</loading>
	</view>
</template>

<script>
	var orderid = 0
	export default {
		data() {
			return {
				judge: true,
				    hidden: true,
				    routes:[],
				    
				    goods: [],
				    current: 0,
				    
				    code:1,
				    code1:2,
				    userStars: [],
				    wjxScore: [],
				    words: [],
				    
				    min: 1,//最少字数
				    max: 300, //最多字数 (根据自己需求改变)
				    
				    clientHeight: 0,
				    submitshow: true,
				    creat_date: ''
			}
		},
		onLoad(options) {
			console.log(options.judge)
			  let t = parseInt(options.time)
			    let that = this
			    let flag = options.judge
			    let list = JSON.parse(decodeURIComponent(options.list))
			    
			
			    if(flag == 0){
					console.log('000')
			      uni.setNavigationBarTitle({ title: '查询物流' })
			      
			        this.judge= false
			        this.creat_date= this.$uniApi.formatTime(new Date(t))
			        this.goods= list
			      
			      this.getLogistics(options.ship, options.code)
			    }else{
				
					orderid = options.orderid
					uni.getSystemInfo({
						success: function (res) {
							that.clientHeight= res.windowHeight - 40 - 15 
						}
					})
			      /**
			       * 初始化五星数组
			       */
			      var star = []
			      var sc = []
			      for (let i = 0; i < list.length; i++) {
			        star[i] = ["../../../static/star-fill.png","../../../static/star-fill.png","../../../static/star-fill.png",
			          "../../../static/star-fill.png","../../../static/star-fill.png"]
			        sc[i] = 5
			      }
					this.goods= list
					this.userStars= star
					this.wjxScore= sc
			      
			    }
		},
		methods: {
			  getLogistics: function (ship, code) {
			    
			    this.hidden= false
			    
			    let that = this
			    var map = { shipper: ship, code: code }
			    uni.request({
			      url: that.$common.serverAddr +'/OrderSys/GetLogistics',
			      data: map,
			      success: function(res) {
			        // console.log(res)
			        that.routes= res.data.Traces
			        that.hidden= true
			      }
			    })
			  },
			  
			  
			    // 星星点击事件
			    starTap: function (upindex, index) {
			      var that = this;
			      // let upindex = e.currentTarget.dataset.upindex
			      // var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
			      var tempUserStars = this.userStars[upindex]; // 暂存星星数组
			      var len = tempUserStars.length; // 获取星星数组的长度
			      for (var i = 0; i < len; i++) {
			        if (i <= index) { // 小于等于index的是满心
			          tempUserStars[i] = "../../../static/star-fill.png";
			        } else { // 其他是空心
			          tempUserStars[i] = "../../../static/star.png"
			        }
			      }
			      // 重新赋值就可以显示了
			      let f = 'userStars['+upindex+']'
			      let s = 'wjxScore['+upindex+']'
			      
			        // that.[f]= tempUserStars,
			        // that.[s]= index+1
			      
			    },
		
			    inputs: function (e) {
			      // 获取输入框的内容
			      var value = e.detail.value;
			      // 获取输入框内容的长度
			      var len = parseInt(value.length);
			      //最多字数限制
			      if (len > this.data.max)
			      return;
			      let upindex = e.currentTarget.dataset.upindex
			      let w = 'words['+upindex+']'
			      // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
			      // this.[w]= value
			      
			    },
			  
			    addComment: function (id, s, content) {
			      let that = this
			      var map = { flag: 'add',dishid: id, userid : that.$common.openID, score: s, content: content}
			      uni.request({
			        url: that.$common.serverAddr +'/OrderSys/HandleComment',
			        data: map,
			        success: function(res) {
			          console.log('add '+res.data)
					  that.$uniApi.tipMsg(res.data)
			          if(res.data == '评论成功'){
			            //评论成功后隐藏提交按钮，以免用户重复提交
			            that.submitshow= false
			            setTimeout(function(){
			              uni.navigateBack({})
			            }, 1000)
			            
			          }
			        }
			      })
			    },
			  
			    updateOrder: function (id, status) {
			      //let that = this
			      var map = { orderid: id }
			      if (status != null) map['status'] = status
			      uni.request({
			        url: that.$common.serverAddr +'/OrderSys/UpdateOrderFromWX',
			        data: map,
			        success: function(res) {
			          if (res.data = '操作成功') return
					  that.$uniApi.tipMsg(res.data)
			        }
			      })
			    },
			  
			    handleBtn(){
			  
			      for (let index = 0; index < this.goods.length; index++) {
			        if(this.words[index] == '' || this.words[index] == null){
						this.$uniApi.tipMsg('评论不能为空')
			            return
			        }
			      }
			      let that = this
			      uni.showModal({
			        title: '确定提交？',
			        success: function (res) {
			          if (res.confirm) {
			            for (let index = 0; index < that.goods.length; index++) {
			              const element = that.goods[index];
			              that.addComment(element.id, that.wjxScore[index], that.words[index])
			            }
			            that.updateOrder(orderid, 5)
			          }
			        }
			      })
			      
			    }
			  
			  
		}
	}
</script>

<style>
@import url("judge.css");
@import url("../orderlist/orderlist.css");
</style>
